/**
 * 动画过度状态组件
 * react-transition-group
 */
import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Route, Switch } from 'react-router-dom';

interface TransitionProps {
  children: React.ReactNode;
}

const Transition = ({ children }: TransitionProps) => {
  // TODO: layout样式
  return (
    <Route
      render={({ location }) => (
        <TransitionGroup>
          <CSSTransition key={location.pathname} timeout={300}>
            <Switch location={location}>{children}</Switch>
          </CSSTransition>
        </TransitionGroup>
      )}
    />
  );
};

export default Transition;
